
<template>
    <div class="w100 h100">

        <!-- <div class="">{{ chart1Data }}</div> -->
        <div id="chart-1" style="min-width: 310px; height: 400px; margin: 0 auto" ref="echart"></div>

    </div>

</template>


<script>
export default {
    props: ['chart1Data', 'chartmonth', 'arrA_title'],
    name: '',
    components: {},
    data() {
        return {
            datas: [],

        }
    },
    created() {
    },
    mounted() {
        this.getOptions(this.chartmonth, this.chart1Data)
        // this.$refs["echart"].getOptions();

    },
    methods: {
        getOptions(chartmonth, datas) {


            var chartDom = document.getElementById('chart-1');
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: this.arrA_title,
                    // subtext: 'Living Expenses in Shenzhen'
                    left:"center"
                },
                xAxis: {
                    type: 'category',
                    // data: ['2022-10', '2022-9', '2022-8', '2022-7', '2022-6', '2022-5']
                    data: chartmonth,
                    axisLabel: {  //  下方字体倾斜
                        interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                        rotate: 38   //调整数值改变倾斜的幅度（范围-90到90）
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: datas,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top'
                        }
                    },


                ],

                tooltip: {//鼠标悬浮提示数据
                    trigger: 'axis',
                    formatter(params) {
                        // console.log(params)
                        return `<div>
                                ${params[0].axisValue} <br /> 本期金额: ${params[0].data}
                                </div>`

                    }

                }
            };



            option && myChart.setOption(option, true);
        }

    },

    watch: {
        chart1Data(newobj, oldobj) {
            console.log(newobj)
            console.log(oldobj)
            this.getOptions(this.chartmonth, newobj)
        }
    }

}
</script>
<style scoped lang='scss'>

</style>
